﻿
.charts .background-image {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-size: cover;
    animation: twistzoom 3s ease-in-out forwards;
    animation-play-state: running;
}

@keyframes twistzoom {
    0% {
        opacity: 0;
        transform: scale(2.5, 2.5) rotate(30deg);
        transform-origin: center;
    }

    10% {
        opacity: 0.2;
    }

    100% {
        transform: scale(1.75, 1.75) translate(-70px, -50px) rotate(0deg);
        transform-origin: center;
    }
}

.charts .win-repeater {
    height: 100%;
    width: 100%;
}

.charts .win-hub-section {
    width: 600px;
    height: 100%;
}


.charts .win-hub-section-content {
    margin-top: 100px;
}

.charts .genderByAge {
    display: -ms-grid;
    -ms-grid-columns: 50px 1fr 1fr;
    -ms-grid-rows: 33px;
}

    .charts .genderByAge .male {
        background-color: #166CD3;
        -ms-grid-column: 2;
        -ms-grid-column-align: end;
        transform: scale(2, 1);
        transform-origin: 100%;
    }

    .charts .genderByAge .female {
        background-color: #F513DE;
        -ms-grid-column: 3;
        transform: scale(2, 1);
        transform-origin: 0%;
    }

.charts .commuteBy {
    display: -ms-grid;
    -ms-grid-columns: 100px 9fr 46fr;
    -ms-grid-rows: 100px;
}

    .charts .commuteBy .circle {
        background-color: #95F12A;
        transform: scale(2, 2);
        min-width: 30px;
        min-height: 30px;
    }

.charts .housingGraph {
    display: -ms-grid;
    width: 50%;
    -ms-grid-columns: 1fr 1fr;
    -ms-grid-rows: 300px;
    text-align: center;
}

    .charts .housingGraph .rent {
        -ms-grid-column: 2;
        background-color: #132476;
    }

    .charts .housingGraph .own {
        background-color: #FF4A02;
        -ms-grid-row-align: end;
    }

    .charts .housingGraph .housingLabel {
        display: block;
    }

    .charts .housingGraph .housingValue {
        font-size: 2em;
    }

    .charts .housingGraph .slideUp {
        transform: translate(0px, -60px);
    }